<template>
	<!-- 底下的按钮组合，最多支持4个 -->
	<view class="btn-group-area" :class="showApprovalOpinion ? 'height-add-textarea' : 'height-minus-textarea'">
		<view class="bottom-btn">
			<view v-if="showApprovalOpinion" class="opinion-box">
				<u-input v-model="approvalOpinion" placeholder="请输入审批意见" type="textarea" border />
			</view>
			<u-row>
				<u-col
					:span="btnList.length == 1 ? '12' : btnList.length == 2 ? '6' : btnList.length == 3 ? '4' : btnList.length == 4 ? '3' : '1'"
					v-for="item in btnList" :key="item.id" @click="handleBtnClick(item)">
					<view class="btnView">
						<view class="one-btn" :style="{ color: item.color}">
							<text v-if="!!item.icon" class="iconfont" :class="item.icon"></text>
							{{item.title}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	let me;
	export default {
		props: ["btnList", "showApprovalOpinion"],
		data() {
			return {
				approvalOpinion: "",
			}
		},
		mounted() {
			me = this;
		},
		methods: {
			handleBtnClick(item) {
				me.$emit("handle-dealwith", {
					approvalOpinion: me.approvalOpinion,
					...item
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.height-add-textarea {
		height: 256rpx;
	}
	.height-minus-textarea {
		height: 108rpx;
	}
	.btn-group-area {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 8;

		.bottom-btn {
			width: 100%;
			height: 108rpx;
			line-height: 108rpx;
			color: #fff;
			.opinion-box {
				padding: 10rpx;
				.u-input {
					height: 128rpx;
					background-color: #fff;
				}
			}
			.u-row {
				width: 100vw;

				.u-col {
					padding: 0 !important;

					.btnView {
						display: inline-block;
						width: 100%;
						text-align: center;

						.one-btn {
							width: 100%;
							color: #36B4FC;
							font-size: 1.4em;
							font-weight: bold;
							background-color: #fff;

							.iconfont {
								margin-right: 10rpx;
							}

							&:first-child {
								border-right: 1px solid #ccc;
							}
						}
					}
				}
			}
		}
	}
</style>
